import { View, ScrollView } from '@tarojs/components'

import './index.scss'

interface TopicProgressBarProps {
  current: number
  sourceData: API.QuestionIndexItem[]
}

const TopicProgressBar: React.FC<TopicProgressBarProps> = props => {
  const { current, sourceData = [] } = props

  // const sumData = Array.from({ length: sum }, (_v, k) => k);

  return (
    <View className='topicProgress_box'>
      <ScrollView
        className='topic_index_box'
        scrollIntoViewAlignment='center'
        scrollIntoView={`topic_index_${current}`}
        scrollWithAnimation
        scrollX
        showScrollbar={false}
      >
        <View className='flex_row id_list'>
          {sourceData.map((value, index) => (
            <View
              key={index}
              className='number_box flex_column'
              id={`topic_index_${index}`}
            >
              <View
                className={
                  current == index ? 'number_text active_text' : 'number_text'
                }
              >
                {index + 1}
              </View>
              <View
                className={value.done ? 'status_box done' : 'status_box'}
              ></View>
            </View>
          ))}
        </View>
      </ScrollView>
      <View className='progress_box'>
        <View className='default_box'></View>
        <View
          className='active_box'
          style={{ width: ((current + 1) / sourceData.length) * 100 + '%' }}
        ></View>
      </View>
    </View>
  )
}

export default TopicProgressBar
